@charset="utf-8";
/*DOCTYPE CSS*/
 body{
	/* perspective:830px; */
 transform-style:preserve-3d; 
 background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
} 
.main{	
	width:100vw;
	height:100vh;
	border:5px solid rgba(44,243,29,0.5);
	margin:0 auto;
	/* transform-style:preserve-3d; *//*preserve维持，保持*/	
	transform-origin:0% 0% 0%;	
/*	background: url('../images/dnelong4.png') no-repeat ;*/
	background-size: 100% 100%;
}

.main .topDiv{
width:100%;
height:15%;
background-size: 100% 100%;
}
.main .topDiv .top_L{
  width:20%;
  height:100%;
  background: url('../images/3.png');
  background-size: 100% 100%;
  border: 1px solid cyan;
}
.main .topDiv .top_C{
  width:60%;
  height:100%;
  background: url('../images/xn2-1.jpg');
   background-size: 100% 100%;
}
.main .topDiv .top_R{
  width:20%;
  height:100%;
  background: url('../images/dl1-1.png');
   background-size: 100% 100%;
}
.main .centerDiv{
	width:100%;
	height:65%;
}
.main .centerDiv .CL_div{
width:10%;
height:100%;
background: url("../images/dl13-2.png");
background-size: 100% 100%;
}
.main .centerDiv .CC_div{
transform-style:preserve-3d;
position: relative;
width:80%;
height:100%;
border:10px solid blue;
/* transform-style:preserve-3d; */
perspective:800px;
transition: 5s;
}
.main .centerDiv .CC_div ul{
	transform-style:preserve-3d; 
	position:absolute;
	width:100%;
	height:100%;
	border:3px solid rgba(105,0,0,.3);
}
.main .centerDiv .CC_div ul li{
	transform-style:preserve-3d;
	position:absolute;
	background: 100% 100%;
}
/*中间的主门开始*/
/*前门*/
.main .centerDiv .CC_div ul .frontPlan{
	width:100%;
	height:100%;
	border:5px solid yellow;
	  /* display: none;  */ 
}
/*中间的锁*/
.main .centerDiv .CC_div ul .frontPlan .lock{
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	width:100px;
	height:100px;
	border-radius:50%; 
	background: url('../images/lock.jpg');
	margin:auto;
	background-size: 100% 100%;
	z-index:2;
}
.main .centerDiv .CC_div ul .frontPlan .lock:hover{
	border:5px solid rgba(255,0,255,.5);
}
/*左半门*/
.main .centerDiv .CC_div ul .frontPlan .L_door{
	width:50%;
	height:100%;
	background: url('../images/gyl.jpg');
	background-size: 100% 100%;
}
/*右半门*/
.main .centerDiv .CC_div ul .frontPlan .R_door{
	width:50%;
	height:100%;
	background: url('../images/zfr.jpg');
	background-size: 100% 100%;
}
/*后*/
.main .centerDiv .CC_div ul .afterPlan{
	width:100%;
	height:100%;
	background:url(../images/lunbo/1.jpg);
	background-size:100% 100%;
	border:3px solid yellow;
	transform: translateZ(-380px);
}
/*左*/
.main .centerDiv .CC_div ul .leftPlan{
	width:100%;
	height:100%;
	background: url('../images/dl10.jpg') no-repeat;
	border:5px solid yellow;
	transform-origin:0 0 0 ;	
	transform: rotateY(90deg) ;
}
/*右*/
.main .centerDiv .CC_div ul .rightPlan{
	width:100%;
	height:100%;
	background: url('../images/ybr.jpg');
	background-size: 100% 100%;
	border:5px solid yellow;
	transform-origin:100% 0 0 ;
	transform: rotateY(-90deg);
}
/*上*/
.main .centerDiv .CC_div ul .topPlan{
	width:100%;
	height:100%;
	background: url('../images/db.jpg');
	border:5px solid yellow;
	transform-origin:100% 0 0 ;
	transform: rotateX(-90deg);
}
/*下*/
.main .centerDiv .CC_div ul .bottomPlan{
	width:100%;
	height:100%;
	background: url('../images/db.jpg');
	background-size: 10% 10%;
	border:5px solid yellow;
	transform-origin:0 100%  0 ;
	transform: rotateX(90deg);
}
.main .centerDiv .CR_div{
width:10%;
height:100%;
background: orange;
background: url("../images/dl13-2.png");
background-size: 100% 100%;
}
.main .centerDiv .CR_div:hover{
background: url("../images/dl-f.png");
background-size: 100% 100%;
}
.main .footDiv{
	width:100%;
	height:20%;
	background: url('../images/shanzi2.png') repeat;
	background-size: 20% 100%;
}